<template>
<div>
    <div class="allMoney">
        <p>{{downMoney.Pair+downMoney.Bpair+downMoney.Tie+downMoney.Banker+downMoney.Player}}</p>
    </div>
    <!-- 桌号 -->
    <div class="numBer">
        <p>0</p>
    </div>
    <!-- 设置筹码 -->
    <div class="MoneyBox" @click="MoneyTableShow=!MoneyTableShow">
        <p>设置<br>筹码</p>
    </div>
    <!-- 筹码设置选择列表 -->
    <transition enter-active-class="animated zoomInRight" leave-active-class="animated fadeOut">
        <div class="MoneyTbale" v-show="MoneyTableShow">
            <p>请选择最常用的5个筹码</p>
            <!-- 筹码表 -->
            <div class="table">
                <ul>
                    <li :class="M.to?'OK':'default'" v-for="(M,k) in MoneyTable" :style="'background:url(../../../../static/img/'+M.id+'.png);background-size:100% 100%'" @click="pushMoney(M.id)">
                       <img :src=imgSr[k] alt="">
                    </li>
                </ul>
            </div>
            <!-- 确定取消 -->
            <div class="post">
                <ul>
                    <li class="okCm" @click="postMoney"></li>
                    <li class="notCm" @click="backMoney"></li>
                </ul>
            </div>
        </div>
    </transition> 
    <!-- 筹码选择 -->
    <div class="MoneyRadio">
        <ul>
            <li :class="cc==thisMoney?'OK':'default'" v-for="(cc,k) in cm"  @click=changeThisMoney(cc)>
               <img :src=imgSr[k] alt="">
            </li>
        </ul>
    </div>
    <div class="GameCenterBox">
        <li class="Pair" @click="StarMoney('Pair')">
            <!-- 筹码 -->
            <transition name="cm">
                <div class="DownCm" v-show="downMoney.Pair>0">{{downMoney.Pair}}</div> 
            </transition>

        </li>
        <li class="Bpair" @click="StarMoney('Bpair')">
            <!-- 筹码 -->
            <transition name="cm">
                <div class="DownCm" v-show="downMoney.Bpair>0">{{downMoney.Bpair}}</div>
            </transition>

        </li>
        <li class="Tie" @click="StarMoney('Tie')">
            <!-- 筹码 -->
            <transition name="cm">
                <div class="DownCm" v-show="downMoney.Tie>0">{{downMoney.Tie}}</div>
            </transition>

        </li>
        <li class="Banker" @click="StarMoney('Banker')" :style="{animation:cardResult}">
            <!-- 筹码 -->
            <transition name="cm">
                <div class="DownCm" v-show="downMoney.Banker>0">{{downMoney.Banker}}</div>
            </transition>
        </li>
        <li class="Player" @click="StarMoney('Player')">
            <!-- 筹码 -->
            <transition name="cm">
                <div class="DownCm" v-show="downMoney.Player>0">{{downMoney.Player}}</div>
            </transition>
        </li>
        <headImg></headImg>
    </div>
</div>
</template>

<script>
import headImg from "@/components/gameCenter/Bets/headImg.vue";
import i5 from "@/assets/img/5.png"
import i10 from "@/assets/img/10.png"
import i20 from "@/assets/img/20.png"
import i50 from "@/assets/img/50.png"
import i100 from "@/assets/img/100.png"
import i200 from "@/assets/img/200.png"
import i500 from "@/assets/img/500.png"
import i1000 from "@/assets/img/1000.png"
import i5000 from "@/assets/img/5000.png"
import i10000 from "@/assets/img/10000.png"
import i50000 from "@/assets/img/50000.png"
export default {
  name: "chip",
  components: {
    headImg
  },
  data() {
    return {
        imgSr:[i5,i10,i20,i50,i100,i200,i500,i1000,i5000,i10000,i50000],
      // 初始化数据
      init: {
        personal: {
          name: "DDD1号",
          money: 12000
        },
        Room: {
          nember: "百家乐A1",
          gameNum: "GCS15200",
          gameRedTop: "20-6000",
          personalRedTop: "500",
          personalDownMoney: 0,
          onLine: 988,
          z: 0,
          h: 0,
          he: 0,
          z2: 0,
          h2: 0,
          videoBox: {
            one: true,
            two: true
          },
          Player: {},
          sonRooom: {
            迪威一厅: [
              {
                id: 1,
                time: 30
              },
              {
                id: 2,
                time: 45
              },
              {
                id: 3,
                time: 25
              },
              {
                id: 4,
                time: 18
              },
              {
                id: 5,
                time: 50
              },
              {
                id: 6,
                time: 30
              },
              {
                id: 7,
                time: 30
              },
              {
                id: 8,
                time: 30
              },
              {
                id: 9,
                time: 12
              },
              {
                id: 10,
                time: 50
              },
              {
                id: 11,
                time: 55
              },
              {
                id: 12,
                time: 60
              },
              {
                id: 13,
                time: 9
              },
              {
                id: 14,
                time: 12
              },
              {
                id: 15,
                time: 17
              },
              {
                id: 16,
                time: 60
              },
              {
                id: 17,
                time: 5
              },
              {
                id: 18,
                time: 19
              },
              {
                id: 19,
                time: 48
              },
              {
                id: 20,
                time: 30
              },
              {
                id: 21,
                time: 30
              },
              {
                id: 22,
                time: 60
              },
              {
                id: 23,
                time: 52
              },
              {
                id: 24,
                time: 48
              },
              {
                id: 25,
                time: 37
              },
              {
                id: 26,
                time: 34
              },
              {
                id: 27,
                time: 46
              },
              {
                id: 28,
                time: 50
              },
              {
                id: 29,
                time: 52
              },
              {
                id: 30,
                time: 51
              }
            ],
            迪威二厅: [
              {
                id: 1,
                time: 30
              },
              {
                id: 2,
                time: 45
              },
              {
                id: 3,
                time: 25
              },
              {
                id: 4,
                time: 18
              },
              {
                id: 5,
                time: 50
              },
              {
                id: 6,
                time: 30
              },
              {
                id: 7,
                time: 30
              },
              {
                id: 8,
                time: 30
              },
              {
                id: 9,
                time: 12
              }
            ]
          }
        }
      },
      //  下注表单
      downMoney: {
        Pair: 0,
        Bpair: 0,
        Tie: 0,
        Banker: 0,
        Player: 0
      },
      // 筹码设置列表参数
      MoneyTableShow: false,
      // 筹码列表
      MoneyTable: [
        {
          id: "5",
          to: false
        },
        {
          id: "10",
          to: false
        },
        {
          id: "20",
          to: false
        },
        {
          id: "50",
          to: false
        },
        {
          id: "100",
          to: false
        },
        {
          id: "200",
          to: false
        },
        {
          id: "500",
          to: false
        },
        {
          id: "1000",
          to: false
        },
        {
          id: "5000",
          to: false
        },
        {
          id: "10000",
          to: false
        },
        {
          id: "50000",
          to: false
        }
      ],
      // 下注筹码
      cm: ["5", "10", "20", "50", "100"],
      //  预临时修改筹码列表
      changeCm: ["5", "10", "20", "50", "100"],
      //  下注筹码
      thisMoney: null,
      //  下注表单
      downMoney: {
        Pair: 0,
        Bpair: 0,
        Tie: 0,
        Banker: 0,
        Player: 0
      },
      num: "迪威一厅",
      star: false,
      samllShow: false,
      // 开牌结果
      cards: {
        show: false,
        card: {
          left: {
            cardCenter: ["1", "k"],
            cardResult: 1
          },
          right: {
            cardCenter: ["3", "j"],
            cardResult: 3
          }
        },
        Result: "庄赢"
      },
      cardResult: ""
    };
  },
  methods: {
    F11: function() {
      var el = document.documentElement;
      var isFullscreen =
        document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen;
      if (!isFullscreen) {
        //进入全屏,多重短路表达式
        (el.requestFullscreen && el.requestFullscreen()) ||
          (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
          (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||
          (el.msRequestFullscreen && el.msRequestFullscreen());
        var height = window.screen.height;
        this.height = height - 70 + "px";
      } else {
        //退出全屏,三目运算符
        document.exitFullscreen
          ? document.exitFullscreen()
          : document.mozCancelFullScreen
            ? document.mozCancelFullScreen()
            : document.webkitExitFullscreen
              ? document.webkitExitFullscreen()
              : "";
        document.msExitFullscreen ? document.msExitFullscreen() : "";
        var height = document.documentElement.scrollHeight;    
      }
    },
    // 设置更新下注筹码列表
    isMoney: function(x) {
      this.MoneyTable.forEach(function(array) {
        switch (array.id) {
          case x[0]:
            array.to = true;
            break;
          case x[1]:
            array.to = true;
            break;
          case x[2]:
            array.to = true;
            break;
          case x[3]:
            array.to = true;
            break;
          case x[4]:
            array.to = true;
            break;
          default:
            array.to = false;
        }
      });
    },
    // 断绝变量引用函数
    echoNull: function(x) {
      var b = JSON.parse(JSON.stringify(x));
      return b;
    },
    // 选择筹码列表设置
    pushMoney: function(x) {
      this.changeCm.forEach(function(array) {
        if (array == x) {
          array = "";
          return true;
        }
      });
    //    console.log(this.changeCm);
      this.changeCm.shift();
      this.changeCm.push(x);
    //   console.log(this.changeCm);
      this.isMoney(this.changeCm);
    },
    // 提交筹码设置
    postMoney: function() {
      var a = this.echoNull(this.changeCm);
      this.cm = a;
      a = null;
      this.isMoney(this.cm);
      this.MoneyTableShow = false;
      console.log(this.cm);
      console.log(this.imgSr);
     
    },
    // 取消改变筹码设置
    backMoney: function() {
      var a = this.echoNull(this.cm);
      this.changeCm = a;
      a = null;
      this.isMoney(this.cm);
      this.MoneyTableShow = false;
    },
    // 改变下注筹码
    changeThisMoney: function(x) {
      this.thisMoney = x;
    },
    // 线框下注
    StarMoney: function(x) {
      if (
        this.init.personal.money <= 0 ||
        this.init.personal.money < this.thisMoney
      ) {
        alert("筹码不足够啦");
      } else if (this.thisMoney == 0 || this.thisMoney == null) {
        alert("请选择下注筹码");
      } else {
        this.downMoney[x] += this.thisMoney * 1;
        this.init.personal.money -= this.thisMoney * 1;
      }
    },
    // 取消下注
    notMoney: function() {
      var i;
      var money = 0;
      for (i in this.downMoney) {
        money += this.downMoney[i] * 1;
      }
      // 恢复余额
      this.init.personal.money += money;
      // 清楚下注盘
      this.downMoney = {
        Pair: 0,
        Bpair: 0,
        Tie: 0,
        Banker: 0,
        Player: 0
      };
    },
    // 下注全压
    allMoney: function(event) {
      var a = event.className;
      console.log(this.init.personal.money);
      // 取消全压
      if (a !== "not") {
        this.thisMoney = this.cm[0];
        event.className = "not";
      } else {
        //选择全压
        this.thisMoney = this.echoNull(this.init.personal.money);
        event.className = "not yellow";
      }
    }
  }
};
</script>
